<template>
	<view>
		<uni-popup ref="popup" type="center" border-radius="10px">
			<uni-card note="Tips" style="width: 100%;">
				<template v-slot:title>
					<view
						style="padding: 5px;display: flex;justify-content: space-between;align-items: center;border-bottom: 2px solid #000;">
						<text style="font-weight: bold;">{{title}}</text>
						<uni-icons type="closeempty" size="16" color="#fff" @click="close"
							style="padding: 5px;background-color: #dd524d;border-radius: 5px;"></uni-icons>
					</view>
				</template>
				<view v-if="desc" class="gl-link-warning">
					<text>{{desc}}</text>
				</view>
				<uni-search-bar v-model="search" placeholder="搜索商品" cancelButton="none" :focus="true"
					@confirm="getStaffList"></uni-search-bar>
				<scroll-view scroll-y="true" style="max-height: 40vh;">


					<checkbox-group @change="changeCurStaff">
						<uni-list :border="true">
							<uni-list-chat v-for="(item, index) in staffArray" :key="index"
								:title="titleSlice(item.name ?? '')"
								:avatar="sConf.cos + (item.icon ??'/media/default/default.png')" :note="item.level+''"
								time="2020-02-02 20:20">
								<view class="chat-custom-right">
									<checkbox :disabled="isDisable" :value="item.level+''" color="#FFCC33"
										style="transform:scale(0.7)" />
								</view>
							</uni-list-chat>
						</uni-list>
					</checkbox-group>
				</scroll-view>

				<template v-slot:actions>
					<view v-if="multi" class="" style="display: flex;justify-content:space-around;padding: 10px 0;">
						<button class="gl-button gl-button-error" style="width: 180px;height: 32px;"
							@click="close()">取消</button>
						<button class="gl-button gl-button-success" style="width: 180px;height: 32px;" @click="selected">确认</button>
					</view>
				</template>
			</uni-card>
		</uni-popup>
	</view>
</template>

<script>
	import psMethod from '@/common/psMethod';
	export default {
		data() {
			return {
				title: '选择商品',
				sConf: getApp().globalData,
				search: '',
				staffArray: [],
				curStaff: [],
				isDisable: false
			}
		},
		props: {
			multi: {
				type: Boolean,
				default: false
			},
			desc: {
				type: String,
				default: null
			}
		},
		methods: {
			selected(){
				console.log(this.curStaff);
				this.isDisable = true
				this.$emit('change', this.curStaff)
				this.close()
			},
			titleSlice(e, l = 12) {
				if (e.length > l) {
					return e.slice(0, l) + '...'
				} else {
					return e
				}
			},
			changeCurStaff(e) {
				console.log('changeCurStaff', e.detail.value);
				this.curStaff = e.detail.value
				if (!this.multi) {
					this.isDisable = true
					this.$emit('change', e.detail.value[0])
					this.close()
				}
				console.log('changeCurStaff', this.curStaff);
			},
			getStaffList(e = null) {
				console.log('getStaffList');
				let data = {
					status: 1
				}
				psMethod.syncAuthenticatorRequest('/admin/level/', 'GET', this.sConf.auth.token, data).then(res => {
					console.log('加载用户', res);
					this.staffArray = res.resmsg
				})
			},
			open(e = null) {
				this.getStaffList()
				this.$refs.popup.open()
			},
			close() {
				this.curStaff = []
				this.isDisable = false
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}
</style>